<template>
  <div class="ele-body">
    <el-card shadow="none" style="margin-bottom: 20px;" v-if="activeName==='service'">
      <span style="font-weight: 800">服务指标综合管理看板</span>
    </el-card>
    <el-card shadow="none" style="margin-bottom: 20px;" v-if="activeName==='bom'">
      <span style="font-weight: 800">备件分析</span>
    </el-card>
    <el-card shadow="none" style="margin-bottom: 20px;" v-if="activeName==='customer'">
      <span style="font-weight: 800">客户投诉分析看板</span>
    </el-card>
    <el-card shadow="none" style="margin-bottom: 20px;" v-if="activeName==='process'">
      <span style="font-weight: 800">流程中心</span>
    </el-card>
    <el-card shadow="none" style="margin-bottom: 20px">
      <el-tabs type="border-card" style="background-color: #e5e5e5" v-model="activeName">
        <el-tab-pane name="service">
          <span slot="label"> 服务指标分析</span>
          <Service ref="service" :activeName="activeName"></Service>
        </el-tab-pane>
        <el-tab-pane label="备件分析" name="bom">
          <Bom  ref="bom" :activeName="activeName"></Bom>
        </el-tab-pane>
        <el-tab-pane label="客户投诉分析" name="customer">
          <Customer ref="customer" :activeName="activeName"></Customer>
        </el-tab-pane>
        <el-tab-pane label="流程中心" name="process">
          <Process ref="process" :activeName="activeName"></Process>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import Service from './components/service.vue'
import Bom from './components/bom.vue'
import Customer from './components/customer.vue'
import Process from './components/process.vue'

export default {
  components: {Bom, Customer, Process, Service},
  data() {
    return {
      activeName: 'service'
    };
  },
  activated() {
    this.init()
    document.querySelector(".ele-admin-content-view").style.height = "100%"
    this.refresh = true
    // console.log()
  },
  deactivated() {
    document.querySelector(".ele-admin-content-view").style.height = "auto"
  },
  methods: {
    init() {
      window.addEventListener("resize", this.resizeList)
      this.$once('hook:beforeDestroy', function () {
        window.removeEventListener('resize', this.resizeList)
      })
    },
    resizeList(event, args = this.$children) {
      const components = args
      if (components.length > 0) {
        components.forEach(component => {
          if (component.echartsGroup?.length > 0) {
            component.echartsGroup.forEach(item => {
              item.resize()
            })
            // component.myEcharts.resize()
          } else if (component.$children.length > 0) {
            this.resizeList(event, component.$children)
          }
        })
      }
    },
    initAllCharts() {
      if (this.activeName === 'bom') {
        this.$refs.bom.initChart()
        this.$refs.bom.initChartBomCenter()
        this.$refs.bom.initBottomChart1()
        this.$refs.bom.initBottomChart2()
        this.$refs.bom.initBottomChart3()
        this.$refs.bom.initBottomChart4()
        this.$refs.bom.initBottomChart5()
      } else if (this.activeName === 'service') {
        this.$refs.service.initChart()
      } else if (this.activeName === 'customer') {
        this.$refs.customer.initTopLeftChart()
        this.$refs.customer.initTopRightChart()
        this.$refs.customer.initMiddleLeftChart()
        this.$refs.customer.initBottomChart()
      }else if (this.activeName === 'process') {
        this.$refs.process.initMiddleLeft()
        this.$refs.process.initBottomChart()
        this.$refs.process.initMiddleMiddle()
        this.$refs.process.initMiddleRight()
      }
    },
  },
  mounted() {
    this.initAllCharts()
    window.addEventListener("resize", this.resizeList)
  },
  watch: {
    activeName: function (newVal, oldVal) {
      if (newVal !== oldVal)
        setTimeout(() => {
          this.initAllCharts()
        })
    }
  }
};
</script>
